<template>
  <div>
    <button @click="getStudent()">获取学生信息</button>
    <!-- 展示学生信息 -->
    <ul>
      <li v-for="(student) of students" :key="student.id">
        {{student.id}} - {{student.name}} - {{student.age}}
      </li>
    </ul>

    <button @click="getCars()">获取到汽车信息</button>
    <!-- 展示汽车信息 -->
    <ul>
      <li v-for="car of cars" :key="car.id">
        {{car.id}} - {{car.name}} - {{car.price}}
      </li>
    </ul>
  </div>
</template>

<script>
  // 引入axios
  import axios from 'axios';

  export default {
    name: 'App',
    data() {
      return {
        students: [],
        cars: []
      }
    },
    methods: {
      getStudent() {
        axios.get('http://localhost:8080/api/students').then(
          response => {
            console.log('请求成功了', response.data);
            this.students = response.data;
          },
          error => {
            console.log('请求失败了', error.message);
          }
        );
      },
      getCars() {
        axios.get('http://localhost:8080/hello/cars').then(
          response => {
            console.log('请求成功了', response.data);
            this.cars = response.data;
          },
          error => {
            console.log('请求失败了', error.message);
          }
        );
      }
    },

  }
</script>

<style>

</style>